<template>
  <div class="menu-list">
    <el-menu
      active-text-color="black"
      router
      :default-active="'1'">
      <el-menu-item :index="item.path + ''" v-for="item in MusicMenuList" :key="item.path">
        <i :class="item.icon"></i>
        <span slot="title" class="list-name">{{ item.ListName }}</span>
      </el-menu-item>
<!--      <el-menu-item-group v-if="createdMusicList.length !== 0" class="group-music-list">-->
<!--        <template slot="title" class="groupTitle">创建的歌单</template>-->
        <el-menu-item
          v-if="$store.state.MusicStore.createdMusicList.length !== 0"
          v-for="(item, index) in $store.state.MusicStore.createdMusicList"
          :key="index"
          :index="'/musiclistdetail/' + item.id"
        >
          <i class="iconfont icon-yinyue"></i>
          <span slot="title" class="list-name">{{ item.name }}</span>
        </el-menu-item
        >
<!--      </el-menu-item-group>-->
<!--      <el-menu-item-group v-if="collectedMusicList.length !== 0">-->
<!--        <template slot="title" class="groupTitle">收藏的歌单</template>-->
<!--        <el-menu-item-->
<!--          v-if="collectedMusicList.length !== 0"-->
<!--          v-for="(item, index) in collectedMusicList"-->
<!--          :key="index"-->
<!--          :index="'/musiclistdetail/' + item.id"-->
<!--        >-->
<!--          <i class="iconfont icon-yinyue"></i>-->
<!--          <span slot="title" class="list-name">{{ item.name }}</span>-->
<!--        </el-menu-item-->
<!--        >-->
<!--      </el-menu-item-group>-->
    </el-menu>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "MenusList",
  data() {
    return {
      //菜单栏
      MusicMenuList: [
        {num: '1', ListName: '发现音乐', path: '/music/discover', icon: 'iconfont icon-tubiaozhizuomobanyihuifu-'},
        {num: '2', ListName: '视频播放', path: '/music/videoIndex', icon: 'iconfont icon-icon-test1'},
        {num: '3', ListName: '我的收藏', path: '/music/favorites', icon: 'iconfont icon-shoucang1'},
        {num: '4', ListName: '每日推荐', path: '/music/recommend', icon: 'iconfont icon-tuijian'}
      ],
      //  激活按钮
      defaultActive: "",
      // 创建的歌单
      createdMusicList: [],
      // 收藏的歌单
      collectedMusicList: [],
    }
  },
  methods: {
    // 请求
    // 请求用户歌单
    async getUserMusicList() {
      if (!this.$store.state.MusicStore.isLogin) {
        // 说明已经退出登录
        layer.msg('请登录', {
          icon: 2,
          time: 1500
        })
        return;
      }
      let timestamp = Date.parse(new Date());
      // 先从localStorage里面读取用户信息  如果登录成功是有存的
      // this.userInfo =
      //   window.localStorage.getItem("userInfo") &&
      //   JSON.parse(window.localStorage.getItem("userInfo"));

      let res = await this.$request("/user/playlist", {
        uid: window.localStorage.getItem("USERID"),
        cookie: window.localStorage.getItem('USERCOOKIE'),
        timestamp,
      });
      // 对数据进行处理分类
      res = res.data.playlist;
      let index = res.findIndex((item) => item.subscribed == true);
      this.createdMusicList = res.slice(0, index);
      this.collectedMusicList = res.slice(index);
      this.createdMusicList[0].name = "我喜欢的音乐";
      // console.log(this.createdMusicList, this.collectedMusicList);
      // 将收藏的歌单上传至vuex
      this.$store.commit("MusicStore/updateCollectMusicList", this.collectedMusicList);
      // 将创建的歌单上传至vuex
      this.$store.commit("MusicStore/updateCreatedMusicList", this.createdMusicList);
    },
  },
  created() {
    if (this.$route.path.search("/musiclistdetail") === -1) {
      this.defaultActive = "/" + this.$route.path.split("/")[1];
    } else {
      this.defaultActive = this.$route.path;
    }
  },
  watch: {

    // 监听收藏歌单的变化
    "$store.state.MusicStore.collectMusicList"(current) {
      this.collectedMusicList = current;
    },
    //监听创建歌单
    "$store.state.MusicStore.createdMusicList"(current) {
      if (this.$store.state.MusicStore.isLogin){
         this.createdMusicList = current;
      }

    },
    "$route.path"(current) {

      if(this.$store.state.MusicStore.isLogin){
        this.createdMusicList = this.$store.state.MusicStore.createdMusicList;
      }
      // 取路由中的首地址 用于侧边栏的导航active
      if (current.search("/musiclistdetail") === -1) {
        this.defaultActive = "/" + current.split("/")[1];
      } else {
        this.defaultActive = current;
      }
      // console.log(current, this.defaultActive);
    },

    // 监听当前下载音乐信息
    "$store.state.MusicStore.downloadMusicInfo"(current) {
      axios
        .get(current.url, {responseType: "blob"})
        .then((res) => {
          let blob = res.data;
          let url = URL.createObjectURL(blob);
          // console.log(url);
          let a = document.querySelector("#downloadCurrentMusic");
          this.downloadMusicInfo.url = url;
          this.downloadMusicInfo.name = current.name;
          this.$nextTick(() => {
            a.click();
            // 用完释放URL对象
            URL.revokeObjectURL(url);
          });
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("下载失败,请稍后重试!");
        });

      // this.downloadMusicInfo = current;
      // let a = document.querySelector("#downloadCurrentMusic");
      // this.$nextTick(() => {
      //   a.click();
      // });
    },
    // 监听vuex中的登录状态
    "$store.state.MusicStore.isLogin"(current) {
      // console.log(current);
      if (current) {
        this.getUserMusicList();
      } else {
        // 清空收藏和创建歌单
        this.createdMusicList = [];
        this.collectedMusicList = [];
      }
    },
  },
}
</script>

<style scoped lang="less">
.menu-list {
  height: 100%;
  width: 220px;
  background-color: rgb(255, 255, 255);

  .el-menu-item {
    display: block;
    justify-content: space-around;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: border-color .3s, background-color .3s, color .3s;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 30px;
  }

  .el-menu-item:hover {
    background-color: rgb(245, 245, 246) !important;
    font-size: 16px;
  }

  .is-active {
    background-color: #f6f6f7;
    font-size: 14px;
    font-weight: 600;
  }

}

</style>
